<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->

<head>
    <meta charset="utf-8"/>
    <title>在线下单</title>
    <meta name="keywords" content="闪送，同城速递，专人直送，同城急件，代买，代送，代购，同城加急，同城快递，限时送达，最快的快递"/>
    <meta name="renderer" content="webkit"/>
    <meta name="description" content="闪送是国内最快的同城速递服务公司，专人直送，60分钟送达全城！24小时在线为用户提供同城急件,蛋糕,鲜花,生鲜,水果等限时递送服务。"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="shortcut icon" href="images/favicon.ico"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/font-awesome-ie7.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/style-metronic.css?v=201509161736}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/style.css?v=2016120801}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/style-responsive.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/blue.css?v=2016120801}" rel="stylesheet" type="text/css" id="style_color"/>
    <link th:href="@{/css/daterangepicker.css?v=20150503203601}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/jquery.fancybox.css}" rel="stylesheet"/>
    <link th:href="@{/css/jquery.raty.css}" rel="stylesheet"/>
    <link th:href="@{/css/pagination.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/order_base.css?v=20161019001}" rel="stylesheet" type="text/css" id="style_color"/>
    <link th:href="@{/css/timepicker.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/jquery.fancybox.css}" rel="stylesheet"/>
    <link th:href="@{/css/custom.css?v=20161209192433}" rel="stylesheet" type="text/css" id="style_color"/>
    <link th:href="@{/css/autocomplete.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/confirmaddress.css}" rel="stylesheet" type="text/css" id="style_color"/>
    <link th:href="@{/css/iss.css?v=201607182014}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/modules.css?v=2016120801}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/common.css?v=20170316184648}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/index.css?v=20170316184648}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/js/jquery-3.5.1.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <script th:src="@{/layer/layer.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/js/jutils-src.js}"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=c02cae89b7705cd2e269fc7e59434542&plugin=AMap.Riding"></script>
    <script>
        var addressStatus=0;
        $(function () {
            //高德地图JS调用部分
            var map = new AMap.Map("mapContainer", {
                center: [104.063556, 30.572965],
                zoom: 14
            });
            var ridingOption = {
                policy: 1
            }
            var riding = new AMap.Riding(ridingOption)

            function drawRoute(route) {
                var path = parseRouteToPath(route)

                var startMarker = new AMap.Marker({
                    position: path[0],
                    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
                    map: map
                })

                var endMarker = new AMap.Marker({
                    position: path[path.length - 1],
                    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
                    map: map
                })

                var routeLine = new AMap.Polyline({
                    path: path,
                    isOutline: true,
                    outlineColor: '#ffeeee',
                    borderWeight: 2,
                    strokeWeight: 5,
                    strokeColor: '#0091ff',
                    lineJoin: 'round'
                })

                routeLine.setMap(map)

                // 调整视野达到最佳显示区域
                map.setFitView([startMarker, endMarker, routeLine])
            }

            // 解析RidingRoute对象，构造成AMap.Polyline的path参数需要的格式
            // RidingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_RideRoute
            function parseRouteToPath(route) {
                var path = []

                for (var i = 0, l = route.rides.length; i < l; i++) {
                    var step = route.rides[i]

                    for (var j = 0, n = step.path.length; j < n; j++) {
                        path.push(step.path[j])
                    }
                }

                return path
            }

            <!--高德JS调用结束-->
            layui.use(['form', 'layer', 'jquery', 'laydate', 'table'], function () {
                var layer = layui.layer,
                    form = layui.form,
                    element = layui.element,
                    laydate = layui.laydate,
                    table = layui.table,
                    $ = layui.$,
                    //选址弹窗的状态，1设置寄件地址，2设置收件地址
                    status = 0
                //layui表单验证状态，验证通过则置为1
                formStatus=0;
                //得到当前时间并加30分钟作为可预约时间
                var s1 = new Date();
                s1.setMinutes(s1.getMinutes() + 40)
                //调用jutils格式化时间
                s1 = jutils.formatDate(s1, "YYYY-MM-DD HH:ii:ss")
                //laydate日期组件中，设定min为四十分钟后
                laydate.render({
                    elem: '[name=arrangeTime]', //指定元素
                    trigger: 'click',
                    type: 'datetime',
                    min: s1,
                    format: 'yyyy-MM-dd HH:mm:ss'
                });
                //layui表单校验
                form.on('submit(go)', function (data) {
                    formStatus=1;
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });
                form.verify({
                    //我们既支持上述函数式的方式，也支持下述数组的形式
                    //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                    weight: [
                        /^(0*[1-9]*)$/
                        ,'重量不能为0或0开头'
                    ]
                });
                //点击下一步调用高德地图api进行距离时间计算，并在选择立即取件时请求分派一个骑手
                $("#saveInfo").click(function () {
                    var origin = "1";
                    var destination = "2";
                    $.getJSON("https://restapi.amap.com/v3/geocode/geo?city=成都&key=80294dd3a8bd79c813aeca647b6e30fd&address=" + $("#sendAddress").val(), function (result) {
                        console.log(result);
                        if (result.count == 1) {
                            origin = result.geocodes[0].location;
                            $.getJSON("https://restapi.amap.com/v3/geocode/geo?city=成都&key=80294dd3a8bd79c813aeca647b6e30fd&address=" + $("#recAddress").val(), function (result) {
                                console.log(result);
                                if (result.count == 1) {
                                    destination = result.geocodes[0].location;
                                    $.getJSON("https://restapi.amap.com/v4/direction/bicycling?key=80294dd3a8bd79c813aeca647b6e30fd&origin=" + origin + "&destination=" + destination, function (result) {
                                        console.log(result);
                                        if (result.errcode == 0) {
                                            $("#distance").val(result.data.paths[0].distance);
                                            $("#expectTime").val(result.data.paths[0].duration);
                                            console.log($("#riderId").val());
                                            console.log($("#arrangeTime").val());
                                            if ($("#riderId").val() !== "" || $("#time").val() !== "") {
                                                if(formStatus==1){
                                                    $("#order").submit();
                                                }
                                            }
                                        }
                                    })
                                } else {
                                    layer.alert("收件地址有误或不在配送范围内，请重新选择！")
                                }
                            })
                        } else {
                            layer.alert("寄件地址有误或不在配送范围内，请重新选择！")
                        }
                    })
                });
                //高德地图api选址事件监听
                $(window).on('message', function (e) {
                    if (status == 1) {
                        $("#sendAddress").val(e.originalEvent.data.name);
                    } else if (status == 2) {
                        $("#recAddress").val(e.originalEvent.data.name);
                    }
                    layer.close(layer.index);
                })
                //选择寄件地址弹窗
                $("#sendMap").click(function () {
                    status = 1;
                    layer.open({
                        type: 2,
                        closeBtn: 1,
                        title: '选择地址',
                        area: ['600px', '600px'],
                        content: ['https://m.amap.com/picker/?center=104.063923,30.573710&key=608d75903d29ad471362f8c58c550daf', 'no'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                        success: function (layero, index) {
                            let iframe = $(layero).find("iframe")[0].contentWindow;
                            iframe.postMessage('hello', 'https://m.amap.com/picker/');
                        }
                    });
                });
                //选择收件地址弹窗
                $("#recMap").click(function () {
                    status = 2;
                    layer.open({
                        type: 2,
                        title: '选择地址',
                        closeBtn: 1,
                        area: ['600px', '600px'],
                        content: ['https://m.amap.com/picker/?center=104.063923,30.573710&key=608d75903d29ad471362f8c58c550daf', 'no'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                        success: function (layero, index) {
                            let iframe = $(layero).find("iframe")[0].contentWindow;
                            iframe.postMessage('hello', 'https://m.amap.com/picker/');
                        }
                    });
                });
                //重量加减按钮
                $("#iShanWeightAdd").click(function () {
                    $("#weight").val(parseInt($("#weight").val()) + 1);
                })
                $("#iShanWeightMin").click(function () {
                    if ($("#weight").val() !== '1' && $("#weight").val() !== '') {
                        $("#weight").val(parseInt($("#weight").val()) - 1);
                    }
                })
                //常用地址按钮
                $("#mySendAddress").click(function () {
                    layer.open({
                        type: 2,
                        title:'常用地址，点击一条选择',
                        area: ['600px', '200px'],
                        content: '/address', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no'],
                        success: function (layero, index) {
                            addressStatus=1;
                        }
                    });
                })
                $("#myRecAddress").click(function () {
                    layer.open({
                        type: 2,
                        title:'常用地址，点击一条选择',
                        area: ['600px', '200px'],
                        content: '/address', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no'],
                        success: function (layero, index) {
                            addressStatus=2;
                        }
                    });
                })
                //重量输入不能为0，为0，鼠标移出置为1
                $("#weight").blur(function () {
                    if($("#weight").val()==0){
                        $("#weight").val(1)
                    }
                })
                //选择预约时间控件,触发地图绘制
                form.on('select(filter)', function (data) {
                    if ($("#sendAddress").val() !== "" && $("#recAddress").val() !== "") {
                        riding.search([
                            {keyword: $("#sendAddress").val(), city: '成都'},
                            {keyword: $("#recAddress").val(), city: '成都'}
                        ], function (status, result) {
                            // result即是对应的骑行路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_RidingResult
                            if (status === 'complete') {
                                drawRoute(result.routes[0])
                            } else {

                            }
                        });
                    }
                    if (data.value == 1) {
                        $("#deliveryTip1").css('display', 'none');
                        $("#deliveryTip2").css('display', 'block');
                        $("#arrangeTime").css('display', 'block');
                    } else {
                        $.getJSON("http://192.168.40.238:8080/rider/random", function (result) {
                            if (result.code == 200) {
                                $("#riderId").val(result.data);
                            } else if (result.code == 801) {
                                layer.msg("无骑手")
                            }
                        })
                        $("#deliveryTip1").css('display', 'block');
                        $("#deliveryTip2").css('display', 'none');
                        $("#arrangeTime").css('display', 'none');
                    }
                });

            });
        })

    </script>
    <style type="text/css">
        .dropdown-submenu:hover > .dropdown-menu {
            display: none
        }
    </style>
    <style type="text/css">
        .dropdown-submenu:hover > .dropdown-menu {
            display: none
        }
    </style>
    <style type="text/css">
        .BMap_mask {
            background: transparent url(images/popup_close_15d2283.gif) no-repeat;
            border: 0;
            cursor: pointer
        }
    </style>
</head>

<body>
<!--     BEGIN HEADER -->
<div class="hContent headerInfo">
    <header th:replace="~{commons::#top}"/>
</div>
<div class="js_pop pop_window" style="display: none">
    <span class="closePopIcon js_pop_cancel"></span>
    <div class="title js_pop_tit"></div>
    <div class="btns">
        <button class="js_pop_btn btn blue"></button>
    </div>
</div>
<div class="bottom_bar"></div>
<div class="page-container" id="container_wrapper">
    <style type="text/css">
        #show_goods_infobox {
            position: absolute;
            margin: 0px;
            padding: 0;
            z-index: 2;
            font-size: 12px;
            border-radius: 0 0 5px 5px;
            color: #666;
            list-style: none;
            display: none;
            width: 100px;
            height: auto;
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #fff;
            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
        }

        #show_goods_infobox li {
            border-bottom: 1px dashed #ccc;
            clear: both;
            width: 90%;
            line-height: 30px;
            overflow: hidden;
            margin: 0 auto;
        }

        #show_goods_infobox li:nth-last-child(1) {
            border-bottom: none;
        }

        .set-my-address button.disabled {
            background: #FFF;
            border: 1px solid #999;
            color: #999;
        }

        .mergeOrder {
            cursor: pointer;
        }
    </style>
    <div class="system_msg_div">
    </div>
    <div class="js-comp info-order-wrap place-multi-order" data-module="PlaceMultiOrder">
        <div class="info-order">
            <form th:action="@{/order/add}" id="order" class="layui-form">
                <input type="hidden" id="distance" name="distance">
                <input type="hidden" id="expectTime" name="expectTime">
                <input type="hidden" id="riderId" name="riderId">
                <div class="info">
                    <!--====取件信息 begin ======-->
                    <div class="info-list">
                        <div class="info-t">
                            寄件信息
                        </div>
                        <div class="tab2 default-send-address" data-default="" data-province="" data-city=""
                             data-longitude="" data-latitude="" data-location="" data-address="" data-name=""
                             data-mobile="" data-id="" style="display: none;">
                            <div class="edit-my-address" style="display: none">
                                <button href="javascript:void(0)" class="btn blue">编辑</button>
                            </div>
                            <table cellspacing="0" cellpadding="0" width="100%">
                                <tbody>
                                <tr>
                                    <td style="padding-left: 30px;padding-right: 50px"> <span
                                            class="my-address-district"> </span> <span class="my-address-location">
                                            </span> <span class="my-address-address"> </span>
                                        <div class="my-address-sender">
                                            &nbsp;&nbsp;&nbsp;
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="tab2 takeGoods-js pickup" address-info-y="" address-info-x=""
                             address-info-province="" address-info-city="" address-info-id="" address-info-address=""
                             address-info-remark="" style="display: ;">
                            <table cellspacing="0" cellpadding="0" width="100%">
                                <tbody>
                                <tr>
                                    <th>寄件地址：</th>
                                    <td>
                                        <div class="address-wrap">
                                            <div class="address">
                                                <input autocomplete="off" id="sendAddress" placeholder="请输入您的寄件地址"
                                                       class="l address-info-address address-info-address2 from-address-info-address"
                                                       type="text" name="sendAddress" lay-verify="required"/>
                                                <a href="javascript:void(0)" id="sendMap"><img class="help-address-a"
                                                                                               title="辅助定位"
                                                                                               th:src="@{/images/u16.png}"/></a>
                                                <a href="javascript:void(0)" id="mySendAddress"
                                                   class="com-adress-a com-address-a-js"
                                                   addr_species="01" style="display: inline;">常用</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>联系人姓名：</th>
                                    <td>
                                        <p><input placeholder="请输入联系人姓名" id="sendName" name="sendName" maxlength="20"
                                                  class="address-info-name from-address-info-name" value=""
                                                  type="text" lay-verify="required"/></p>
                                    </td>
                                </tr>
                                <tr>
                                    <th>手机号：</th>
                                    <td>
                                        <p><input placeholder="请输入联系人手机号"
                                                  class="address-info-phone from-address-info-phone" name="sendPhone"
                                                  value=""
                                                  maxlength="20" type="text" id="sendPhone"
                                                  lay-verify="required|phone"/></p> <input
                                            class="address-info-id from-address-info-id" value="" type="hidden"/>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--====取件信息 over ======-->
                    <!--====收货信息 begin ======-->
                    <div class="info-list">
                        <div class="info-t">
                            收件信息
                        </div>
                        <!--====tab2 begin ======-->
                        <div class="tab2 tab-js takeGoods-js" address-info-x="" address-info-y=""
                             address-info-province="" address-info-city="" address-info-id="">
                            <div class="receipt-address-num num1" style="display: none;">
                                1
                            </div>
                            <table cellspacing="0" cellpadding="0" width="100%">
                                <tbody>
                                <tr>
                                    <th>收件地址：</th>
                                    <td>
                                        <div class="address-wrap">
                                            <div class="address">
                                                <input autocomplete="off" placeholder="请输入您的收件地址"
                                                       class="l address-info-address address-info-address2 to_address"
                                                       type="text" id="recAddress" name="recAddress"
                                                       lay-verify="required"/>
                                                <a href="javascript:void(0)" id="recMap"><img class="help-address-a"
                                                                                              title="辅助定位"
                                                                                              th:src="@{/images/u16.png}"/></a>
                                                <a href="javascript:void(0)" id="myRecAddress"
                                                   class="com-adress-a com-address-a-js"
                                                   addr_species="02" style="display: inline;">常用</a>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>联系人姓名：</th>
                                    <td>
                                        <p><input autocomplete="off" maxlength="20" placeholder="请输入联系人姓名"
                                                  class="address-info-name  to-address-info-name" value=""
                                                  type="text" id="recName" name="recName" lay-verify="required"/></p>
                                    </td>
                                </tr>
                                <tr>
                                    <th>手机号：</th>
                                    <td>
                                        <p><input autocomplete="off" placeholder="请输入联系人手机号"
                                                  class="address-info-phone to-address-info-phone" value=""
                                                  maxlength="20" type="text" id="recPhone" name="recPhone"
                                                  lay-verify="required|phone"/></p>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!--====tab2 over ======-->
                    </div>
                    <!--====收货信息 over ======-->
                    <!--====物品信息 begin ======-->
                    <div class="info-list" style="border-bottom:none;padding-bottom:50px;">
                        <div class="info-t">
                            物品信息
                        </div>
                        <!--====tab2 begin ======-->
                        <div class="tab2 tab-js margin-bottom-20">
                            <table cellspacing="0" cellpadding="0" width="100%">
                                <tbody>
                                <tr>
                                    <th>物品重量：</th>
                                    <td>
                                        <div class="iShanWeight">
                                                <span class="weightCtrl"><a href="javascript:;" class="a min"
                                                                            id="iShanWeightMin"></a></span>
                                            <i class="txt"> <input class="goodWeight" id="weight" name="items[0].weight"
                                                                   maxlength="3"
                                                                   onkeyup="this.value=this.value.replace(/\D/g,'')"
                                                                   onafterpaste="this.value=this.value.replace(/\D/g,'')"
                                                                   value="1"
                                                                   type="text" lay-verify="required|weight"/> <span
                                                    id="weight-info">公斤</span> </i>
                                            <span class="weightCtrl"><a href="javascript:;" class="a add"
                                                                        id="iShanWeightAdd"></a></span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>物品种类：</th>
                                    <td>
                                        <div class="layui-inline">
                                            <!--                                            <div class="layui-input-block">-->
                                            <select name="items[0].categoryId" lay-verify="required">
                                                <option value=""></option>
                                                <option th:each="category:${categories}" th:text="${category.name}"
                                                        th:value="${category.id}">文件
                                                </option>
                                            </select>
                                            <!--                                            </div>-->
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <th>备注：</th>
                                    <td>
                                        <p><input id="remark" name="items[0].remark" class="demoInfo" goods_species="2"
                                                  placeholder="可在这里填写您的特别要求" value="" type="text"/></p>
                                        注意：不支持指定闪送员接单，不支持指定交通方式
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <!--====tab2 over ======-->
                        </div>
                        <!--====物品信息 over ======-->
                        <!--====取件时间 begin ======-->
                        <div class="info-list" style="border-bottom:none;padding-bottom:50px;">
                            <div class="info-t">
                                取件时间
                            </div>
                            <!--====tab2 begin ======-->
                            <div class="tab2 tab-js">
                                <table cellspacing="0" cellpadding="0" width="100%">
                                    <tbody>
                                    <tr>
                                        <th width="280">是否预约：</th>
                                        <td>
                                            <!-- time begin -->
                                            <div>
                                                <!-- time handle begin -->
                                                <div class="layui-inline">
                                                    <select id="arrange" name="arrange" lay-filter="filter"
                                                            lay-verify="required">
                                                        <option value=""></option>
                                                        <option value="2">立即取件</option>
                                                        <option value="1">预约取件</option>
                                                    </select>
                                                </div>
                                                <div class="layui-inline" id="arrangeTime" style="display: none">
                                                    <input name="arrangeTime" placeholder="选择预约时间" type="text"
                                                           id="time"/>
                                                </div>
                                                <div id="deliveryTip1" style="border:none;clear:left;">
                                                    闪送员接单后会立即上门取件
                                                </div>
                                                <div id="deliveryTip2"
                                                     style="border:none;clear:left; color: #fd4801;display: none;">
                                                    注意：预约时间为闪送员上门取件时间。支持1小时以后，两天以内。
                                                </div>
                                                <!-- time over -->
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <!--====tab2 over ======-->
                            </div>
                            <!--====取件时间 over ======-->
                            <!--====指定配送方式 begin ======-->
                            <!--==== 指定配送方式 over ======-->
                            <!--====并单 begin ======-->
                            <!--====并单 over ======-->
                            <!--====信息统计 下一步 begin ======-->
                            <div class="info-last-wrap">
                                <div class="map-div">
                                    <div style="width: 100%; height: 100%; border: 6px solid rgb(205, 215, 215); overflow: hidden; position: relative; z-index: 0; background-color: rgb(243, 241, 236); color: rgb(0, 0, 0); text-align: left;"
                                         id="mapContainer">

                                    </div>
                                    <!--====信息统计 下一步  over ======-->
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" lay-submit lay-filter="go" id="saveInfo"
                                                    class="btn btn-radius blue save-btn">下 一
                                                步
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bigMapDiv">
                        <div id="bigMapContainer" style="width:100%;height:100%;">
                        </div>
                    </div>
                </div>
            </form>

            <!-- tip box -->
            <ul id="show_goods_infobox">
                <li>goods and remarks will be added here!</li>
            </ul>
        </div>
        <!-- BEGIN FOOTER -->
        <footer th:replace="~{commons::#footer}"/>
    </div>
</div>
</body>
</html>